<template>
	<view class="Income" :class="{'IncomeBody':!loading && !list.length}">
		<!-- 统计 -->
		<view class="statistics dis-ali radius12 f-background">
			<view class="text-align">
				<view class="font-weight-700 color3 size-40 price-font">{{statistics.today || 0}}</view>
				<view class="font-weight-400 color6 size-24 u-margin-top-24">今日(元)</view>
			</view>
			<view class="text-align">
				<view class="font-weight-700 color3 size-40 price-font">{{statistics.yesterday || 0}}</view>
				<view class="font-weight-400 color6 size-24 u-margin-top-24">昨日(元)</view>
			</view>
			<view class="text-align">
				<view class="font-weight-700 color3 size-40 price-font">{{statistics.thisMonth || 0}}</view>
				<view class="font-weight-400 color6 size-24 u-margin-top-24">本月(元)</view>
			</view>
			<view class="text-align">
				<view class="font-weight-700 color3 size-40 price-font">{{statistics.lastMonth || 0}}</view>
				<view class="font-weight-400 color6 size-24 u-margin-top-24">上月(元)</view>
			</view>
		</view>
		<!-- 筛选部分 -->
		<view class="section margin-bottom-16">
			<view class="operate f5-background dis-cen">
				<picker mode="selector" :range="deliveryList" @change="onChange" range-key="name">
					<view class="dis-ali">
						<text class="font-weight-400 color3 size-26">{{deliveryList[params.dataBean.orderType].name}}</text>
						<text class="margin-left-12 iconfont icon-down-1-copy size-24 color9"></text>
					</view>
				</picker>
				<!--<picker mode="selector" :range="setList" @change="onChange" range-key="name">
					<view class="dis-ali">
						<text class="font-weight-400 color3 size-26">结算状态</text>
						<text class="margin-left-12 iconfont icon-down-1-copy size-24 color9"></text>
					</view>
				</picker>-->
				<view class="dis-ali" @click="filteringShow=true">
					<text class="font-weight-400 color3 size-26">{{selectDataName}}</text>
					<image class="icons margin-left-12" src="@/static/icon/rl.png" mode=""></image>
				</view>
			</view>
			<view class="statis font-weight-400 color6 size-26 f-background">
				共 <text class="font-weight-500 size-26 color3 price-font">{{statistics.orderCount || 0}}</text> 个订单，
				<text class="font-weight-500 size-26 color3 price-font">{{statistics.packCount || 0}}</text>个包裹，收入
				<text class="font-weight-500 size-26 color3 price-font">¥{{statistics.amount || 0}}</text>
			</view>
		</view>
		<!-- 列表 -->
		<mescroll-body @init="mescrollInit" @down="$event=>$event.resetUpScroll(false)"
			@up="$event=> postExpressRecords($event.num)" :toTop="{width: '100px',height: '100px'}"
			:down="{auto: false}" :up="{auto: true, textNoMore: '-已经到底啦-',page: pageUp,empty:{use:false}}">
			<view v-if="!loading && !list.length">
				<Default tisName="暂无相关收入数据！" />
			</view>
			<view v-for="(item,index) in list" :key="index" :id="`id${item.merchantId}`"
				class="box-sizing f-background radius12 margin-bottom-16 border-f">
				<OrderModule :item="item" :index="index" />
			</view>
		</mescroll-body>
		<!-- 日期筛选 -->
		<u-popup :show="filteringShow" round="32rpx" @close="filteringShow=false">
			<view class="pop-section width100">
				<view class="filter border-bottom text-align">
					<text class="font-weight-600 color3 size-28">送达日期</text>
				</view>
				<view class="select-title">
					<view class="select-item dis color-8" :class="{'back-2e color-f':selectDataIndex == item.type}"
						v-for="(item,index) in selectData" :key="index" @click="onSelectData(item)">
						<text class="font-weight-400 size-28">{{item.name}}</text>
					</view>
				</view>
				<view class="sele-data text-align" @click="dateRange = true">
					<view class="sele border-bottom size-32 color3 font-weight-400">{{params.startTime}}</view>
					<view class="sele font-weight-400 color3 size-26">至</view>
					<view class="sele border-bottom size-32 color3 font-weight-400">{{params.endTime}}</view>
				</view>
				<view class="button dis-cen">
					<u-button type="primary" :customStyle="{width: '336rpx',height: '80rpx',borderRadius: '8rpx'}"
						color="#DCDCDC" plain @click="onReceiving(2)">
						<text class="color-6 font-weight-600 size-28">重置</text>
					</u-button>
					<u-button type="primary" :customStyle="{width: '336rpx',height: '80rpx',borderRadius: '8rpx'}"
						color="#FF1E1E" @click="onReceiving(3)">
						<text class="color-f font-weight-600 size-32">确定</text>
					</u-button>
				</view>
			</view>
		</u-popup>
		<!-- 日期范围 -->
		<u-calendar :show="dateRange" :defaultDate="[]" :rowHeight="100" round="32rpx" :showTitle="false" mode="range"
			@confirm="onConfirm" :showLunar="true" :monthNum="12" :maxDate="datesFuture(0)" :minDate="datesFuture(-270)"
			:color="settings.color"></u-calendar>
	</view>
</template>

<script>
	// import dayjs from 'dayjs';
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import { ExpressRecords, DeliverySettlement } from "@/api/index";
	import { dataSize, settings } from "@/utils/public"
	import { datesFuture } from "@/utils/index"
	import OrderModule from '@/components/order-module/order-module'
		import Default from "@/components/default/default"
	// import Popup from '@/components/popup/popup'
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			OrderModule,
			Default
			// Popup
		},
		data() {
			return {
				pageUp: {
					num: 0
				},
				loading: true,
				settings,
				statistics: {}, // 统计
				dateRange: false, // 日期范围
				filteringShow: false, // 日期筛选
				list: [],
				// 快递类型
				deliveryList: [
					{ name: "全部", type: 0 },
					{ name: "代取快递", type: 1 },
					{ name: "代买商品", type: 2 }
				],
				// 选择的日期
				selectDataIndex: 3,
				selectDataName: '近7日',
				selectData: [
					{ name: "今日", type: 1, data: 0 },
					{ name: "昨日", type: 2, data: -1 },
					{ name: "近7日", type: 3, data: -7 },
					{ name: "近30日", type: 4, data: -30 }
				],
				params: {
					size: 10,
					current: 1,
					dataBean: {
						orderType: 0, // 类型 0.所有 1.快递 2.商品
						orderStatus: 1, // 订单状态 0.创建订单 1.完成 2.待付款 3.待接单 4.待取货 5.配送中 6.已取消
						startTime: datesFuture(-7), // 开始日期
						endTime: datesFuture(0), // 结束日期
					}
				}
			}
		},
		onShow() {
			this.postDeliverySettlement()
			// this.postExpressRecords()
		},
		onLoad() {},
		methods: {
			datesFuture,
			// 统计
			async postDeliverySettlement() {
				const { code, data } = await DeliverySettlement()
				if (code == '200') {
					this.statistics = data
				}
			},
			// 列表
			async postExpressRecords(page) {
				let { params } = this
				params.current = page || 1
				this.pageUp.num = page || 1
				const _this = this
				const { code, data } = await ExpressRecords(params)
				if (code == '200') {
					const datas = { orderCount: data.orderCount, packCount: data.packCount, amount: data.amount, }
					this.statistics = { ...this.statistics, ...datas }
					this.list = params.current == 1 ? data.page.records : this.list.concat(data.page.records); //追加新数据
					// console.log(data.page.total,'手动阀',data.page.records.length)
					setTimeout(() => {
						_this.loading = false
						_this.mescroll.endByPage(data.page.records.length, data.page
						.total); //必传参数(当前页的数据个数, 总页数)
					}, 500)
				}
			},
			onReceiving(index) {
				if (index == 2) {
					this.selectDataName = '近7日'
					this.selectDataIndex = 3
					this.params.dataBean.startTime = datesFuture(-7) // 开始日期
					this.params.dataBean.endTime = datesFuture(0) // 结束日期
				}
				this.filteringShow = false
				this.postExpressRecords()
			},
			// 选择日期
			onSelectData(item) {
				console.log(item)
				this.params.dataBean.startTime = datesFuture(item.data) // 开始日期
				this.params.dataBean.endTime = datesFuture(0) // 结束日期
				this.selectDataName = item.name
				this.selectDataIndex = item.type
				this.filteringShow = false
				this.postExpressRecords()
			},
			// 日期范围
			onConfirm(e) {
				// console.log(e)
				this.params.dataBean.startTime = e[0] // 开始日期
				this.params.dataBean.endTime = e[e.length - 1] // 结束日期
				this.selectDataIndex = -1
				this.selectDataName = `${e[0]}至${e[e.length - 1]}`
				this.dateRange = false
				this.filteringShow = false
				this.postExpressRecords()
			},
			onChange(e) {
				console.log(e)
				this.params.dataBean.orderType = e.detail.value * 1
				this.postExpressRecords()
			}
		}
	}
</script>

<style lang="scss">
	::v-deep.IncomeBody .mescroll-body{
		min-height: 50vh!important;
	}
	.Income {
		padding: 16rpx;

		// 统计
		.statistics {
			display: grid;
			grid-template-columns: repeat(4, 25%);
			padding: 52rpx 0 36rpx;
		}

		// 筛选部分
		.section {
			position: sticky;
			top: 0;
			z-index: 100;
			// padding: 24rpx 0 20rpx;

			.operate {
				padding: 24rpx 24rpx 20rpx;

				.icons {
					width: 24rpx;
					height: 24rpx;
				}
			}

			.statis {
				padding: 14rpx 20rpx 12rpx;
				border-radius: 12rpx;
			}
		}

		// 弹窗部分
		.pop-section {
			.select-title {
				padding: 28rpx 28rpx 24rpx;
				box-sizing: border-box;
				display: grid;
				grid-column-gap: 38rpx;
				grid-template-columns: repeat(4, 1fr);
			}

			.filter {
				padding: 30rpx 0 24rpx;
			}

			.select-item {
				// width: 100%;
				height: 56rpx;
				background: #F4F4F4;
				border-radius: 4rpx;

			}

			.sele {
				box-sizing: border-box;
				line-height: 82rpx;
			}

			.sele-data {
				display: grid;
				grid-template-columns: 300rpx 1fr 300rpx;
				padding: 34rpx 28rpx 68rpx;
			}

			.button {
				padding: 0 24rpx 24rpx;
			}

			.back-2e {
				background: #2E2E2E;
			}
		}
	}
</style>